<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="shortcut icon"
          href="/public/image/logo.PNG"
          mce_href="https://static-index-4gtuqm3bfa95c963-1304825656.tcloudbaseapp.com/official-website/favicon.svg"
          type="image/x-icon"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/admin.css">
    <script src="https://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js"></script>
    <script src="/public/js/vue.js"></script>
    <title>反馈内容详情</title>
    <style>
        /*-------------------reply-------------------*/
        :root {
            --replyWidth: 60%;
            --criticalWidth: 375px;
        }

        .feedback_app {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .feedback_main {
            width: max(var(--replyWidth), var(--criticalWidth));
            display: flex;
        }

        .feedback_image {
            width: max(var(--criticalWidth), 50%);
            height: 100%;
            margin: 0;
        }

        .feedback_content {
            box-sizing: border-box;
            padding: 20px;
        }

        .feedback_text {
            min-height: 200px;
            max-height: 260px;
            padding: 10px;
            background-color: #e9e9e9;
            overflow: auto;
        }

        .feedback_text, .feedback_time {
            text-align: left;
        }

        .reply_main {
            width: max(var(--replyWidth), var(--criticalWidth));
            box-sizing: border-box;
            padding: 10px;
        }

        @media screen and (max-width: 750px) {
            .feedback_main {
                flex-wrap: wrap;
            }

            .feedback_image {
                width: 375px;
                height: 375px;
            }

            .feedback_text {
                min-height: 20px;
                padding: 10px;
                background-color: transparent;
            }
        }
    </style>
</head>
<body>
<div id="feedbackApp" class="feedback_app">
    <div class="feedback_main">
        <img v-if="feedbackInfo.feedbackImageUrl !== 'null'" class="feedback_image" :src="feedbackInfo.feedbackImageUrl" alt="feedbackImageUrl"
             :ref="feedbackInfo.feedbackId" @click="showImg($refs[feedbackInfo.feedbackId])">
        <div class="feedback_content">
            <div class="feedback_text">{{feedbackInfo.feedbackContent}}</div>
            <div class="feedback_time">{{feedbackInfo.feedbackTime}}</div>
        </div>
    </div>
    <div class="reply_main">
        <label>
            <input type="text" style="width: 80%" v-model="replyText" @keydown.enter="reply">
            <button @click="reply">回复</button>
        </label>
        <div v-for="item in replyList" :key="item.replyId"
             class="reply_content_card" style="border-bottom: 1px solid #adadad;padding: 5px 0">
            <div style="display: flex;justify-content: space-between;margin: 4px 0">
                    <span style="padding: 2px 4px;border-radius: 4px;color: #FFF;font-weight: bold"
                          :style="{background:item.userRole?'#1a6dbb':'#ffce91'}">{{item.roleName}}</span>
                <span style="color: #b9b9b9;font-size: 13px">{{item.replyTime}}</span>
            </div>
            <div>{{item.replyContent}}</div>
        </div>
    </div>
</div>
<!--查看大图-->
<div class="result" id="outdiv">
    <div class="indiv">
        <img class="imgresult" id="bigimg" src="" alt="">
    </div>
</div>
<script>
    let nowFeedback = sessionStorage.getItem("nowFeedback")
    let nowRole = sessionStorage.getItem("nowRole")
    /* 进入首页token验证 */
    const token = localStorage.getItem(nowRole==="1"?"adminToken":"userToken")
    if (!token) {
        location.href = "/public/admin/login.html"
    }
    if (!nowFeedback) {
        history.go(-1)
    }
    new Vue({
        el: "#feedbackApp",
        data: {
            feedbackInfo: JSON.parse(nowFeedback),
            replyList: [],
            replyText: ""
        },
        mounted() {
            this.getReplyList()
        },
        methods: {
            getReplyList() {
                const that = this
                const {feedbackId} = that.feedbackInfo
                $.ajax('/feedback/getFeedbackReply', {
                    method: "post",
                    // contentType: false,
                    processData: false,
                    data: `feedbackId=${feedbackId}`,
                    headers: {
                        "Authorization": `Bearer ${token}`
                    },
                    success: function (result) {
                        const {data, code} = result
                        that.replyList = []
                        if (code === 200) {
                            that.replyList = data.map(item => ({
                                replyId: item['reply_id'],
                                replyContent: item['reply_content'],
                                replyTime: item['reply_time'].replace(/T|.[\dA-Z]{4}$/g, " "),
                                userRole: item['user_role'],
                                roleName: item['role_name']
                            }))
                            console.log(that.replyList)
                        } else {
                            alert(result.msg)
                        }

                    },
                    error: function () {
                        alert("发生错误，请联系管理员")
                    }
                })
            },
            reply() {
                if (!this.replyText) return alert("不能提交空内容")
                const that = this
                $.ajax('/feedback/addReply', {
                    method: "post",
                    // contentType: false,
                    processData: false,
                    data: `feedbackId=${that.feedbackInfo.feedbackId}&replyContent=${that.replyText}`,
                    headers: {
                        "Authorization": `Bearer ${token}`
                    },
                    success: function (result) {
                        const {data, code} = result
                        if (code === 200) {
                            that.replyText = ''
                            that.getReplyList()
                        } else {
                            alert(result.msg)
                        }

                    },
                    error: function () {
                        alert("发生错误，请联系管理员")
                    }
                })
            },
            showImg(thisElement) {
                const winW = $(window).width();
                const winH = $(window).height();
                const src = $(thisElement).attr('src');
                $("#bigimg").attr("src", src);
                $("<img/>").attr("src", src).load(function () {
                    const imgW = thisElement.width / 2;
                    let imgH = thisElement.height / 2;
                    const scale = imgW / imgH;
                    if (imgW > winW) {
                        $("#bigimg").css("width", "100%").css("height", "auto");
                        imgH = winW / scale;
                        const h = (winH - imgH) / 2;
                        $(".indiv").css({"left": 0, "top": h});
                    } else {
                        $("#bigimg").css("width", imgW + 'px').css("height", imgH + 'px');
                        const w = (winW - imgW) / 2;
                        const h = (winH - imgH) / 2;
                        $(".indiv").css({"left": w, "top": h});
                    }
                    const outDiv = $("#outdiv")
                    outDiv.fadeIn("fast");
                    outDiv.click(function () {
                        $(this).fadeOut("fast");
                    });
                });
            }
        }
    })

</script>
</body>
</html>
